<div class="topPaginator">
    <span class="signsName">Custom Signs</span>
</div>
<div id="signShow" class="custom">
    <div id="customSigns">
        <div class="blueLine">&nbsp;</div>
        <div id="customButtons">
            <div id="firstButton">
                <img class="buttonImg" src="/images/main/firstButton.png" alt="Crate It!">
                <span class="buttonText">
                    <span class="newLine"><b>Create It!</b></span>
                    Select Size,<br />
                    Color and<br />
                    Text!
                </span>
            </div>
            <div id="sekondButton">
                <img class="buttonImg" src="/images/main/sekondButton.png" alt="Save It!">
                <span class="buttonText">
                    <span class="newLine"><b>Save It!</b></span>
                    Finalize Design<br />
                    Select Printing<br />
                    or File Download!
                </span>
            </div>
            <div id="thirdButton">
                <img class="buttonImg" src="/images/main/thirdButton.png" alt="Print It!">
                <span class="buttonText">
                    <span class="newLine"><b>Print It!</b></span>
                    Enter Shipping and<br />
                    Payment Info and<br />
                    Finalize Order!
                </span>
            </div>
        </div>
        <div class="blueLine">&nbsp;</div>
        <div class="clear">&nbsp</div>
        <div id="customLeftblock">
            <form id="customForm">
                <div class="blocHead">
                    <div class="rightArrowLeft"></div>
                    <span class="blueMessege">Design Your Sign</span>
                </div>
                <div id="leftBlockContent">
                    <span class="newLine marginTop10">Sign dimension</span>
                    <span class="newLine dimension">
                        <input type="radio" name="dimension" value="1" />18"x24"
                        <input type="radio" name="dimension" value="2" checked/>24"x36"
                    </span>
                    <span class="newLine marginTop10">Sign orientation</span>
                    <span class="newLine orientation">
                        <input type="radio" name="orientation" value="P" />Vertical
                        <input type="radio" name="orientation" value="L" checked/>Horizontal
                    </span>
                    <div id="customSignSignsText" class="marginTop10">
                        <span id="baseTextInput" class="newLine lineText">
                            <input type="checkbox" data="1" value="" />
                            <input type="text" value="Enter Text Line" />
                        </span>
                        <span class="newLine addNewLine">
                            <a href="#">Add new line</a>
                        </span>
                    </div>
                    <div id="customSignSignsSettings" class="marginTop10">
                        <div class="leftSide">
                            <span class="newLine">Size(inch)</span>
                            <select id="sizeSelect">
                                <?for ($i=1; $i<=20; $i++):?>
                                    <option value="<?=$i;?>" data="<?=$i;?>"><?=$i?> inch</option>
                                <?endfor;?>
                            </select>
                            <span class="newLine">Font</span>
                            <select id="fontSelect">
                                <option value="HelveticaNeue" data="HelveticaNeue">Helvetica</option>
                                <option value="Arial" data="Arial">Arial</option>
                                <option value="Verdana" data="Angrc">Angrc</option>
                                <option value="sans-serif" data="Angryblu">Angryblu</option>
                                <option value="Geneva" data="Badabb">Badabb</option>
                                <option value="Geneva" data="Dirtyheadline">Dirtyhead</option>
                                <option value="Geneva" data="Edo">Edo</option>
                                <option value="Geneva" data="MarkupSW">MarkupSW</option>
                            </select>
                            <span class="newLine">Select color</span>
                            <span class="newLine">
                                <div class="colorSelect black" data="black">&nbsp;</div>
                                <div class="colorSelect red" data="red">&nbsp;</div>
                                <div class="colorSelect green" data="green">&nbsp;</div>
                                <div class="colorSelect blue" data="blue">&nbsp;</div>
                            </span>
                        </div>
                        <div class="rightSide">
                            <span class="upperText">MOVE SELECTION</span>
                            <div id="arrows">
                                <div class="arrowsDirection upDirection" data="up"></div>
                                <div class="arrowsDirection leftDirection" data="left"></div>
                                <div class="arrowsDirection rightDirection" data="right"></div>
                                <div class="arrowsDirection downDirection" data="down"></div>
                            </div>
                        </div>
                    </div>
                    <div id="saveSign" class="blocHead updateDesign">
                        <span class="blueMessege">UPDATE DESIGN</span>
                    </div>
                </div>
            </form>
        </div>
        <div id="customRightblock">
            <div class="blocHead">
                <div class="rightArrowLeft"></div>
                <span class="blueMessege">This is What Your Sign Will Look Like</span>
            </div>
            
            <div id="drownBox" class="horizontal inch24">
                <div id="workDiv1" class="workDivs" style="display: none;"></div>
                <span class="picketDescription">www.picketlinesigns.com</span>
            </div>
            <div id="statusBlock">
                <span id="inches">24"x36"</span>
                <span id="orient">Horizontal</span>
            </div>
        </div>
    </div>
    <div id="nextStep">
        <b>Finalize Your Design. Proof-Read Then Continue</b>
        <a href="/custom/save">
            <div id="saveAndContinue" class="blocHead saveDesign">
                <div class="rightArrowLeft"></div>
                <span class="blueMessege">SAVE AND CONTINUE</span>
            </div>
        </a>
    </div>
</div>
<div id="middleBlock">
    <?=$midleBlock;?>
</div>